import React, { Component } from 'react';
import {
  Card,
  Input,
  Row,
  Col,
  Form
} from 'antd';
import WangUeditor from './uEditor/wangUeditor';

class RichEditor extends Component {
  state = {
    wangUEditorHtml: '',
    wangUEditorJson: ''
  }

  // 获取wangEditor hTML格式
  getWangEditorChange = (html) => {
    this.setState(() => ({
      wangUEditorHtml: html
    }));
  }

  // 获取wangEditor JSON格式
  getWangEditorJson = (json) => {
    this.setState(() => ({
      wangUEditorJson: JSON.stringify(json)
    }));
  }

  render() {
    const autoSize = {
      minRows: 6,
      maxRows: 15
    };

    return (
      <div>
        <Card title="wangUeditor">
          <WangUeditor
            wangEditorHtml={this.getWangEditorChange}
            wangEditorJson={this.getWangEditorJson}
          />
          <Row>
            <Col span={12}>
              <Form.Item label="获取内容">
                <Input.TextArea autosize={autoSize} value={this.state.wangUEditorHtml} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="json格式">
                <Input.TextArea
                  autosize={autoSize}
                  value={this.state.wangUEditorJson}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="显示">
                <div dangerouslySetInnerHTML={{ __html: this.state.wangUEditorHtml }} />
              </Form.Item>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
}

export default RichEditor;
